<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.couponName" placeholder="请输入优惠券名称名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.couponStatus"
            placeholder="请选择优惠券状态"
            style="width: 240px"
          >
            <el-option
              v-for="item in couponStatusDatas"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="warning" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="btn-list">
        <el-button @click="addNewCoupon" >添加新的优惠券</el-button>
      </div>

      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column property="id" label="ID"/>
        <el-table-column property="couponName" label="优惠券名称" width="200" show-overflow-tooltip />
        <el-table-column property="couponType" label="类型">
          <template #default="scope">
            {{ couponTypeDatas.filter(item => item.type === scope.row.couponType)[0].name }}
          </template>
        </el-table-column>
        <el-table-column property="couponParValue" label="面值"/>
        <el-table-column property="receiveType" label="领取方式" width="100">
          <template #default="scope">
            {{ receiveTypeDatas.filter(item => item.type === scope.row.receiveType)[0].name }}
          </template>
        </el-table-column>
        <el-table-column property="receiveDate" label="领取日期" width="380">
          <template #default="scope">
            {{ scope.row.receiveExpirationType === 0 ? scope.row.receiveExpirationStart + ' - ' + scope.row.receiveExpirationEnd : '不限时' }}
          </template>
        </el-table-column>
        <el-table-column property="expirationDay" label="使用时间" width="100">
          <template #default="scope">
            {{ scope.row.expirationDay + '天' }}
          </template>
        </el-table-column>
        <el-table-column property="limitNum" label="发布数量" width="120">
          <template #default="scope">
            <span v-if="scope.row.isLimitType === 1">不限量</span>
            <div v-else>
              <div>
                <span>发布：{{ scope.row.limitNum }}</span>
              </div>
              <div style="color: red;">
                <span>剩余：{{ scope.row.surplusNum }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="couponStatus" label="是否开启" width="100">
          <template #default="scope">
            {{ scope.row.couponStatus === 0  ? '开启' : '关闭'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作"  min-width="150">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)" v-if="scope.row.couponStatus === 1">
              修改
            </el-button>
            <el-button link type="primary" size="small" @click="handleReceiveLog(scope.row)">
              领取记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        size="default"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <coupon-add-or-update ref="couponAddOrUpdateRef" @refreshDataList="onQuery"></coupon-add-or-update>
    </el-card>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import CouponAddOrUpdate from './coupon-add-or-update.vue'
  import { tableList } from '~/api/coupon/coupon'

  const tableData = ref([]) // 表格列表数据
  const currentPage = ref(1) // 当前页数
  const pageSize = ref(20) // 每页20条数据
  const background = ref(false) // 是否为分页按钮添加背景色
  const disabled = ref(false) // 否禁用分页
  const total = ref(0) // 总页数
  const couponAddOrUpdateRef = ref(null) // 优惠券弹框
  // 优惠券类型
  const couponTypeDatas = ref([
    {type: 0, name: '通用券'},
    {type: 1, name: '商品券'},
    {type: 2, name: '品类券'}
  ])
  // 领取方式
  const receiveTypeDatas = ref([
    {type: 0, name: '手动领取'},
    {type: 1, name: '新人券'},
    {type: 2, name: '赠送券'}
  ])

  const formInline = reactive({
    couponName: '',
    couponStatus: '',
    page: currentPage.value,
    limit: pageSize.value
  })
  // 优惠券状态
  const couponStatusDatas = [
    {id: 0, name: '开启'},
    {id: 1, name: '关闭'}
  ]

  // 进入此页面时触发
  onQuery()
  // 查询表格数据
  function onQuery() {
    tableList(formInline).then(res => {
      if(res && res.data.code === 200) {
        const datas = res.data.data.records
        tableData.value = datas
        total.value = res.data.data.total
      }
    })
  }
  // 修改
  function handleEdit(row) {
    if(couponAddOrUpdateRef.value) {
      couponAddOrUpdateRef.value.init(row.id)
    }
  }
  // 领取记录
  function handleReceiveLog() {}
  // 添加新的优惠券
  function addNewCoupon() {
    if(couponAddOrUpdateRef.value) {
      couponAddOrUpdateRef.value.init()
    }
  }
  // 重置
  function onReset() {
    formInline.couponName = ''
    formInline.couponStatus = ''
    formInline.page = 1
    formInline.limit = 20
  }

  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    onQuery()
  }

</script>
<style>
  .el-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }

  .btn-list {
    margin-bottom: 20px;
  }
</style>